import 'package:flutter/material.dart';

//弹性布局（Flex）
class LayoutListRoute extends StatelessWidget {
  const LayoutListRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('布局'),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: () => {Navigator.pushNamed(context, 'flex_widget')},
              child: const Text('跳转flex布局'),
            ),
            TextButton(
              onPressed: () => {Navigator.pushNamed(context, 'wrap_widget')},
              child: const Text('跳转warp布局'),
            ),
            TextButton(
              onPressed: () => {Navigator.pushNamed(context, 'stack_widget')},
              child: const Text('跳转绝对布局'),
            ),
            TextButton(
              onPressed: () =>
                  {Navigator.pushNamed(context, 'after_layout_widget')},
              child: const Text('跳转AfterLayout'),
            ),
            TextButton(
              onPressed: () => {Navigator.pushNamed(context, 'padding_widget')},
              child: const Text('跳转容器页面'),
            ),
            TextButton(
              onPressed: () =>
                  {Navigator.pushNamed(context, 'scaffold_widget')},
              child: const Text('跳转页面骨架'),
            ),
          ],
        ),
      ),
    );
  }
}

//弹性布局（Flex）
class FlexLayoutTestRoute extends StatelessWidget {
  const FlexLayoutTestRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('flex布局'),
        ),
        body: Column(
          children: <Widget>[
            Flex(
              direction: Axis.horizontal,
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.red,
                    height: 30.0,
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    color: Colors.cyan,
                    height: 30.0,
                  ),
                )
              ],
            ),
            Padding(
                padding: const EdgeInsets.only(top: 20),
                child: SizedBox(
                  height: 100,
                  child: Flex(
                    direction: Axis.vertical,
                    children: [
                      Expanded(
                        flex: 2,
                        child: Container(
                          color: Colors.red,
                        ),
                      ),
                      const Spacer(flex: 1),
                      Expanded(
                        flex: 1,
                        child: Container(
                          color: Colors.cyan,
                        ),
                      ),
                    ],
                  ),
                )),
          ],
        ));
  }
}

// 流式布局 Wrap
class WrapRoute extends StatelessWidget {
  const WrapRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('布局'),
        ),
        body: const Wrap(
          spacing: 8.0, // 主轴(水平)方向间距
          runSpacing: 4.0, // 纵轴（垂直）方向间距
          alignment: WrapAlignment.start,
          children: [
            Chip(
              avatar:
                  CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
              label: Text('Hamilton'),
            ),
            Chip(
              avatar:
                  CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
              label: Text('Lafayette'),
            ),
            Chip(
              avatar:
                  CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
              label: Text('Mulligan'),
            ),
            Chip(
              avatar:
                  CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
              label: Text('Laurens'),
            ),
          ],
        ));
  }
}

// 层叠布局（Stack、Positioned） 感觉这个是常用的布局方法
class StackRoute extends StatelessWidget {
  const StackRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('层叠布局'),
        ),
        body: ConstrainedBox(
          constraints: const BoxConstraints.expand(),
          child: Stack(
            alignment: AlignmentDirectional.center,
            fit: StackFit.expand, //未定位widget占满Stack整个空间
            children: [
              //当下面的Container铺满空间的时候，stack是层级展示的，这个Positioned的层级在Container下面，所以他会被盖住
              //没有设置stack的fit属性时，是不会被盖住的
              const Positioned(
                child: Text('i am left'),
                left: 18,
              ),
              // Container这个widget是没有定位的，设置了fit之后他会铺满整个空间
              Container(
                child: const Text(
                  'i am container',
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
              ),
              const Positioned(
                child: Text('i am top'),
                top: 18,
              )
            ],
          ),
        ));
  }
}

//LayoutBuilder 我们可以在布局过程中拿到父组件传递的约束信息，然后我们可以根据约束信息动态的构建不同的布局。

class AfterLayoutRoute extends StatefulWidget {
  const AfterLayoutRoute({Key? key}) : super(key: key);

  @override
  State<AfterLayoutRoute> createState() => _AfterLayoutRouteState();
}

class _AfterLayoutRouteState extends State<AfterLayoutRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('获取坐标'),
      ),
      body: Column(
        // mainAxisSize: MainAxisSize.min,
        children: [
          Padding(
            padding: const EdgeInsets.all(8),
            child: Builder(builder: (context) {
              return GestureDetector(
                child: Container(
                  alignment: Alignment.center,
                  child: const Text(
                    'Text1: 点击我获取我的大小',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: Colors.blue, backgroundColor: Colors.yellow),
                  ),
                ),
                onTap: () => {
                  //获取尺寸
                  print('Text1: ${context.size}')
                },
              );
            }),
          ),
          const Divider(
            color: Colors.lightGreen,
          ),
        ],
      ),
    );
  }
}
